<script setup>
	import { ref,computed } from 'vue'
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	import dayjs from 'dayjs'
	
	const userId = computed(() => store.userInfo._id)
	const show = ref(false)
	const form = ref([
		{name: ''},
		{name: ''},
		{name: ''},
		{name: ''}
	])
	const db = uniCloud.database()
	const emit = defineEmits(['changeCreateRoom'])
	
	const close = () => {
		uni.navigateBack()
	}
	
	const submit = async () => {
		const isEmpty = form.value.some(obj => obj.name === '');
		if(isEmpty) return uni.$u.toast("请输入完整")
		const nameList = form.value.map(item => item.name)
		const query = {
			userId:[userId.value],
			status:0,
			dataList:[],
			nameList,
			currentData:[],
			createTime:dayjs().format('YYYY-MM-DD HH:mm:ss')
		}
		const res = await db.collection('leisure_list').add(query)
		uni.showToast({title:'创建成功'})
		emit('changeCreateRoom',res.result.id)
		show.value = false
	}
	
	
	defineExpose({show})
</script>

<template>
	<u-modal :show="show" title="添加成员" showCancelButton confirmText="创建对局" @cancel="close" @confirm="submit">
		<view class="slot-content">
			<view class="form">
				<u--form labelPosition="left" :model="form">
					<u-form-item label="姓名" borderBottom v-for="(item,index) in form" :key="index">
						<u--input v-model="item.name" border="none" :placeholder="`成员 ${index + 1}`" :maxlength="3"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
	</u-modal>
</template>

<style lang="scss">
	.form{
		width: 100%;
	}
</style>